<template>
<article>
    <!-- <sticky className="searchPB"> -->
    <i-seach-bar ref="seachbar"></i-seach-bar>
    <!-- </sticky> -->
    <el-table ref="multipleTable" :data="blogList" tooltip-effect="dark" stripe border>
        <el-table-column type="index" width="55" align="center" header-align="center" :index="increment"></el-table-column>

        <el-table-column show-overflow-tooltip
                          v-if="!item.hidden && !item.filters"
                          v-for="(item, index) in headerOptions"
                          :key="index" :label="item.label"
                          :prop="item.prop"
                          :header-align="item.headerAlign"
                          :align="item.align"
                          :sortable="item.sort"
                          :min-width="item.width || 120">
            <template slot-scope="scope">
                <div v-if="scope.column.property == 'sort'">{{sortFilter(scope.row[scope.column.property])}}</div>
                <div v-else-if="scope.column.property == 'state'">{{scope.row[scope.column.property] === "draft"?'草稿':'已发布'}}</div>
                <div v-else-if="scope.column.property == 'createAt'">{{scope.row[scope.column.property] | parseTime('{y}-{m}-{d} {h}:{i}')}}</div>
                <div v-else-if="scope.column.property == 'updateAt'">{{scope.row[scope.column.property] | parseTime('{y}-{m}-{d} {h}:{i}')}}</div>
                <div v-else>{{scope.row[scope.column.property] || '无'}}</div>
            </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip
                          v-else-if="!item.hidden && item.filters"
                          :key="index" :label="item.label"
                          :prop="item.prop"
                          :header-align="item.headerAlign"
                          :align="item.align"
                          :sortable="item.sort"
                          :filters="item.filters"
                          :filter-method="filterTag"
                          :min-width="item.width || 200">
            <template slot-scope="scope">
                <el-tag
                    class="tag"
                    type="primary"
                    close-transition
                    v-for="(tag, index) in scope.row.type" :key="index">{{tag}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center" width="180">
            <template slot-scope="scope">
            <el-button size="mini" @click="edit(scope)">编辑</el-button>
            <el-button size="mini" type="danger" @click="del(scope)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageindex"
      :page-sizes="size_scoped"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next"
      :total="blogTotal">
    </el-pagination>
</article>
</template>
<script>
    import { mapGetters } from 'vuex'
    import iSeachBar from 'base/SeachBar'
    import Sticky from 'base/Sticky'
    export default {
      components: {
        iSeachBar,
        Sticky
      },
      data() {
        return {
          editShow: false,
          blogInfo: {},
          pageindex: 1,
          pagesize: 10,
          size_scoped: [10, 20, 30, 40],
          headerOptions: [
            {
              label: '_id',
              prop: '_id',
              hidden: true,
              headerAlign: 'center',
              align: 'center',
              width: ''
            },
            {
              label: '分类',
              prop: 'sort',
              hidden: false,
              headerAlign: 'center',
              align: 'center',
              width: ''
              // filters: blogFilters
            },
            {
              label: '标题',
              prop: 'title',
              hidden: false,
              headerAlign: 'center',
              align: 'center',
              width: ''
              // sort: true
            },
            {
              label: '描述',
              prop: 'desc',
              hidden: false,
              headerAlign: 'center',
              align: 'center',
              width: ''
            },
            {
              label: '来源',
              prop: 'source',
              hidden: false,
              headerAlign: 'center',
              align: 'center',
              width: 80
            },
            {
              label: '作者',
              prop: 'author',
              hidden: false,
              headerAlign: 'center',
              align: 'center',
              width: 80
            },
            {
              label: '发布时间',
              prop: 'createAt',
              hidden: false,
              headerAlign: 'center',
              align: 'center',
              width: 180
              // sort: true
            },
            {
              label: '最后更新',
              prop: 'updateAt',
              hidden: false,
              headerAlign: 'center',
              align: 'center',
              width: 180
              // sort: true
            },
            {
              label: '状态',
              prop: 'state',
              hidden: false,
              headerAlign: 'center',
              align: 'center',
              width: 100
            }
          ]
        }
      },
      created() {
        this.$store.dispatch('GetSortList', { pageindex: 1, pagesize: 100 })
        this.$store.dispatch('GetTagList', { pageindex: 1, pagesize: 100 })
      },
      // watch: {
      //   sortList() {
      //     this.sortFilter()
      //   }
      // },
      mounted() {
        this.$refs.seachbar.getBlogList(this.pageindex, this.pagesize)
      },
      methods: {
        sortFilter(id) {
          const a = this.sortList.filter(sortId => {
            return id === sortId._id
          })
          try {
            return a[0].title
          } catch (e) {
            console.log(e)
          }
        },
        increment(index) {
          return index + 1 + ((this.pageindex - 1) * this.pagesize)
        },
        handleSizeChange(val) {
          this.pagesize = val
          this.$refs.seachbar.getBlogList(1, this.pagesize)
        },
        handleCurrentChange(val) {
          this.pageindex = val
          this.$refs.seachbar.getBlogList(this.pageindex, this.pagesize)
        },
        del(scope) {
          this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(async() => {
            try {
              const message = await this.$store.dispatch('DelBlog', scope.row._id)
              this.$refs.seachbar.getBlogList(this.pageindex, this.pagesize)
              this.$message({
                type: 'success',
                message: message.msg
              })
            } catch (e) {
              console.log(e)
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        },
        async edit(scope) {
          this.editShow = true
          scope.row.updateAt = new Date(scope.row.updateAt)
          try {
            await this.$store.dispatch('CurrentBlogInfo', scope.row)
            this.$router.push(`/article/edit/${scope.row._id}`)
          } catch (e) {
            console.log(e)
          }
        },
        filterTag(value, row) {
          return row.type.some(v => v === value)
        }
      },
      computed: {
        ...mapGetters([
          'sortList',
          'blogList',
          'tagList',
          'blogTotal'
        ])
      }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
article {
  padding: 10px;
  .pagination {
    text-align: right;
    padding: 20px 0;
  }
  .tag {
    margin: 0 10px;
  }
}
</style>
